<template>
  <div class="sg-main wrapper">
    <div class="sg-content">
      <div class="rank-menu">
        <div class="rank">
          <div class="r-item"><a class="active" href="">价格<span class="sort-arrow"></span></a></div>
        </div>
      </div>
      <div class="sg-list clearfix">
        <div v-for="item in dataList" class="col col-3" :key="item.commodityId">
          <div class="item">
            <div class="inner">
              <a @click="openDetail(item.commodityId)"><img class="figure" :src="item.commodityImgurl" alt="" /></a>
              <a @click="openDetail(item.commodityId)"><div class="name">{{item.commodityName}}</div><div class="price">{{item.commodityPrice}}元</div></a>
              <a class="act" @click="add(item.commodityId)"><i class="iconfont icon-cart"></i>加入购物车</a>
            </div>
          </div>
        </div>
      </div>
      <el-pagination
        @current-change="handleCurrentChange"
        :page-size="pageSize"
        :pager-count="5"
        layout="prev, pager, next"
        :total="total">
      </el-pagination>
    </div>
    <div class="sg-aside">
      <div class="sg-aside-tit">
        店铺热销
      </div>
      <div class="shop-hot">
        <div class="item">
          <a href=""><img class="figure" src="uploads/33.jpg" alt="" /></a>
          <div class="p-name"><a href="">飞利浦（PHILIPS）32PHF5021/T3 32英寸液</a></div>
          <div class="price">¥5999.00</div>
        </div>
        <div class="item">
          <a href=""><img class="figure" src="uploads/33.jpg" alt="" /></a>
          <div class="p-name"><a href="">飞利浦（PHILIPS）32PHF5021/T3 32英寸液</a></div>
          <div class="price">¥5999.00</div>
        </div>
        <div class="item">
          <a href=""><img class="figure" src="uploads/33.jpg" alt="" /></a>
          <div class="p-name"><a href="">飞利浦（PHILIPS）32PHF5021/T3 32英寸液</a></div>
          <div class="price">¥5999.00</div>
        </div>
        <div class="item">
          <a href=""><img class="figure" src="uploads/33.jpg" alt="" /></a>
          <div class="p-name"><a href="">飞利浦（PHILIPS）32PHF5021/T3 32英寸液</a></div>
          <div class="price">¥5999.00</div>
        </div>
      </div>
    </div>
  </div>

</template>
<script>
import http from '../../../base/api/http'
export default {
  name: 'SearchItemList',
  props: {
    list: Array
  },
  watch: {
    list (newValue, oldValue) {
      this.handleCurrentChange(1)
    }
  },
  data () {
    return {
      pageSize: 8,
      dataList: []
    }
  },
  computed: {
    total () {
      return this.list.length
    }
  },
  methods: {
    handleCurrentChange (val) {
      this.dataList = this.list.slice((val - 1) * this.pageSize, val * this.pageSize)
    },
    add (commodityId) {
      http.requestGet('/java/api/cart/addCart', {
        'commodityId': commodityId
      }).then((res) => {
        if (res.status === 0) {
          alert('添加成功')
        }
      })
    },
    openDetail (id) {
      this.$router.push({path: '/searchDetail', query: { commodityId: id }})
    }
  },
  mounted () {
  }
}
</script>
<style>
.qd {
  margin-left: 8px;
  line-height: 25px;
  -webkit-border-radius: 0;
  border-radius: 0;
}
</style>
